<route lang="json5" type="page">
    {
      style: {
        navigationBarTitleText: '充值成功',
      }
    }
</route>

<script setup lang="ts">
import { ref } from 'vue'

// 交易单号 - 可以从路由参数获取或生成
const transactionId = ref('42254554847000021282155514')

function handleConfirm() {
  uni.navigateBack()
}

function downloadVoucher() {
  uni.showToast({ title: '下载功能开发中', icon: 'none' })
}
</script>

<template>
  <view class="success-page min-h-screen flex flex-col bg-white">
    <!-- 成功状态内容 -->
    <view class="flex-1 px-6 pt-16 text-center">
      <!-- 成功图标 -->
      <view class="mb-6 flex justify-center">
        <view class="h-16 w-16 flex items-center justify-center rounded-full bg-blue-500">
          <wd-icon name="check" size="32px" color="#fff" />
        </view>
      </view>

      <!-- 成功标题 -->
      <view class="mb-4 text-xl text-black font-medium">
        充值成功
      </view>

      <!-- 成功描述 -->
      <view class="mb-8 text-sm text-gray-500">
        您的余额充值成功，请注意查收
      </view>

      <!-- 交易单号 -->
      <view class="mb-6 rounded-lg bg-gray-50 p-4">
        <view class="text-left">
          <view class="mb-2 text-sm text-gray-600">
            交易单号
          </view>
          <view class="break-all text-base text-black font-mono">
            {{ transactionId }}
          </view>
        </view>
      </view>

      <!-- 下载充值凭据按钮 -->
      <view class="mb-8 text-center">
        <wd-button
          type="info"
          plain
          size="small"
          @click="downloadVoucher"
        >
          下载-充值凭据
        </wd-button>
      </view>
    </view>

    <!-- 底部确认按钮 -->
    <view class="px-6 pb-8">
      <wd-button
        block
        type="primary"
        size="large"
        custom-class="!rounded-lg !h-12"
        @click="handleConfirm"
      >
        确认
      </wd-button>
    </view>

    <!-- 安全区域占位 -->
    <view class="h-0" style="padding-bottom: env(safe-area-inset-bottom);" />
  </view>
</template>

<style scoped>
.success-page {
  background: #ffffff;
}

/* Reset button styles for uni-app */
button {
  line-height: 2.75rem;
  height: 2.75rem;
}
button::after {
  border: none;
}
</style>
